<template>
  <div class="common-layout container">
    <el-container class="container">
      <el-header class="header">
        <div class="logo">
          <img src="../assets/my_logo.png" alt="">
          <span>校园表白墙</span>
        </div>
        <div class="user">
          <div class="demo-type">
            <div>
              <el-button plain @click="avatarDialogVisible = true;" style="width: 20px; height: 20px">
                <el-avatar :icon="UserFilled" :src="'http://'+user.img" />
              </el-button>
            </div>
            <el-dialog class="avatarDialog" :showClose="false" center v-model="avatarDialogVisible" title="更新头像">
              <el-upload 
                ref="upload"
                class="avatar-uploader" 
                :show-file-list="false" 
                action='http://localhost:8081/user/upload_img/'
                :with-credentials="true"   
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"    
                :auto-upload = 'true'
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="file_out">关闭</el-button>
                </span>
              </template>
            </el-dialog>
          </div>
          <el-button :onclick="out_log">{{ user.name }}退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside">
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" unique-opened router>
            <el-sub-menu :index="index + ' '" v-for="(item, index) in menuList.menus">
              <template #title>
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>{{ item.name }}</span>
              </template>
              <el-sub-menu :index='index + "-" + indexc' v-for="(childItem, indexc) in item.children">
                <template #title>{{ childItem.name }}</template>
                <el-menu-item :index='childItemchild.path' v-for="(childItemchild, indexchild) in childItem.children">
                  {{ childItemchild.name }}
                </el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>

import { onMounted, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage,ElUpload } from 'element-plus'
import { UserFilled, Menu as IconMenu, Location, Setting, Plus } from '@element-plus/icons-vue'
import api from '@/api/index.js'

// const app = getCurrentInstance()
// const user_img = app.appContext.config.globalProperties.$user_img
// 获取全局变量user_img
const { proxy } = getCurrentInstance()
let user_img = proxy.$user_img

onMounted(() => {
  console.log(user_img);

  // 获取用户信息
  if_login_api();
  // 获取菜单列表
  api.get_meaus().then(res => {
    menuList.menus = res.data
  })
});

const user = ref({
  id: '',
  name: '',
  sex: '',
  img: '',
})



// 菜单列表
const menuList = reactive({
  menus: [],
  icons: {
    '1': 'User',
    '2': 'Tools',
    '3': 'Goods',
    '4': 'Shop',
    '5': 'PieChart'
  }
})

const router = useRouter()

// 弹窗变量(更改用户头像)
const avatarDialogVisible = ref(false)
const imageUrl = ref('')
const fd = new FormData()
const upload = ref()

const beforeAvatarUpload=(rawFile)=>{
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('只能上传jpg格式的图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传大小超过2M')
    return false
  }
  return true
}

/**
 * 处理文件变更的函数
 *
 * @param file 当前选择的文件对象
 * @param fileList 当前文件列表
 */

const handleAvatarSuccess = (res, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
  user.value.img  = res.user_img;
}

const file_out=()=>{
  avatarDialogVisible.value = false;
}

const if_login_api = () => {
  api.if_login().then(res => {
    console.log(res)
    if (res.data.data == false) {
      router.push('/login')  // 没有登录，跳转到登录页面
    }
    else {
      // 将用户信息保存下来
      user.value.id = res.data.id;
      user.value.name = res.data.name;
      user.value.sex = res.data.sex;
      user.value.img = res.data.img;
    }
  })
}




// 退出登录
const out_log = () => {
  console.log(123)
  api.log_out().then(res => {
    if (res.data.data == true) {
      router.push('/login')
    }
  })
}


</script>

<style scoped>
.header {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  font-size: 20px;
  color: #999;
  height: 50px;
  width: 100%;
}

.logo {
  float: left;
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.logo img {
  width: 50px;
  height: 30px;
  margin-right: 10px;
}

.user {
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.aside {
  width: 200px;
  background-color: #545c64;
}

.container {
  height: 100%;
}

.demo-type {
  margin-right: 20px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* 用户头像更改css */
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>